<template>
	<el-row :gutter="10">
		<!-- 图表 -->
	    <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
			<div id="wagesChart" style="height:100%;" v-if="isShowEcharts">
			</div>
		</el-col>
	    
		
		<!-- 人员数据 -->
		<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
			<div >	
				<el-tabs type="border-card">
				    <el-tab-pane label="详细数据">
						<el-row>
						    <!-- 按时间选择 -->
							<el-col :span="10" class="wageNav">
								<el-date-picker 
								style="width:150px;" type="date" 
								v-model="selectDetailBytime"
								@change="subByTime()"
								value-format="YYYY-MM-DD"
								placeholder="选择一个日期">
								 </el-date-picker>
							</el-col>
						    <!-- 按人名选择 -->
							<el-col :span="14"  class="wageNav">
								<el-select v-model="selectDetailByNameId" 
								class="m-2"  style="width: 150px;" 
								placeholder="按人名选择" size="default"
								 @change="subByNameId($event)">
								     <el-option
								       v-for="item in options"
								       :key="item.value"
								       :label="item.label"
								       :value="item.value"									  
									 >
								     </el-option>
								</el-select>							
							</el-col>
							<!-- 表格 -->							
							<el-table :data="wagesDetail" style="width:100% ;text-align:center;" max-height="430px">
								<el-table-column prop="time" label="时间" width="130" />
								<el-table-column prop="name" label="负责人" width="90" />
								<el-table-column prop="commission" label="绩效" width="90" />
								<el-table-column prop="note" label="备注" width="160" />
							</el-table>

							<el-row style="width: 100%;">
							    <el-col :span="24" style="text-align: center;">
										<el-pagination
										      v-model:currentPage="queryInforByWages.pagenum"
										      :page-size="queryInforByWages.pagesize"
										      layout="prev, pager, next"
										      :total="queryInforByWages.total"
										      @size-change="handleSizeChangeByDetailWages()"
										      @current-change="handleCurrentChangeByDetailWages()"
										    >
										</el-pagination>
								</el-col>
							</el-row>
							
						</el-row>
					</el-tab-pane>
				    <el-tab-pane label="数据更新">
						<el-row :gutter="20">
						    <el-col :span="12" :offset="6" >
									<el-form
									    :label-position='labelPosition'
									    label-width="100px"
									    style="max-width: 460px;"
										v-model="updataStaffWages"
									  >
									    <el-form-item label="负责人">
											<el-select v-model="updataStaffWages.staffId"
											class="m-2"  style="width: 150px;" 
											placeholder="按人名选择" size="default">
											     <el-option
											       v-for="item in options"
											       :key="item.value"
											       :label="item.label"
											       :value="item.value"									  
												 >
											     </el-option>
											</el-select>
									    </el-form-item>
									    <el-form-item label="加减薪资" >
									      <el-input v-model="updataStaffWages.commission" ></el-input>
									    </el-form-item>
										<el-form-item label="备注" >
										  <el-input v-model="updataStaffWages.note" ></el-input>
										</el-form-item>
										<el-form-item label="">
										<el-button type="primary" @click="subUpdata">提交</el-button>
										</el-form-item>
									</el-form>
							</el-col>
						</el-row>
					</el-tab-pane>
					
					<el-tab-pane label="人事变动">
						<el-row :gutter="20">
						    <el-col :span="12" :offset="6" >
										<el-form
									    :label-position='labelPosition'
									    label-width="100px"
									    style="max-width: 460px;border-bottom: 0.0625rem #8CC5FF solid;"
										v-model="addStaffForm"
										>

									    <el-form-item label="工号">
											<el-input  v-model="addStaffForm.staffId" placeholder="请输入一个工号"></el-input>		
									    </el-form-item>
										<el-form-item label="姓名">
											<el-input v-model="addStaffForm.name"  placeholder="请填写姓名"></el-input>
										</el-form-item>
										
										<el-form-item>
											<el-button @click="subAddStaff()">添加</el-button>
										</el-form-item>										
									</el-form>
									
									<el-form
									    :label-position='labelPosition'
									    label-width="100px"
									    style="max-width: 460px;"
									  >

									    <el-form-item label="人员删除">
											<el-select v-model="deleStaffId"
											class="m-2"  style="width: 150px;" 
											placeholder="按人名选择" size="default">
											     <el-option
											       v-for="item in deleStaffOptions"
											       :key="item.value"
											       :label="item.label"
											       :value="item.value"									  
												 >
											     </el-option>
											</el-select>
											<el-button type="danger" plain @click ="subDelStaff">删除</el-button>
									    </el-form-item>
									</el-form>
							</el-col>
						</el-row>
					</el-tab-pane>
				</el-tabs>
			</div>
		</el-col>
	</el-row>
</template>

<script lang="ts" setup>
	import * as echarts from 'echarts'
	import { onMounted,ref,onUnmounted,reactive} from 'vue'
	import { ArrowDown } from '@element-plus/icons-vue'
	import { ElMessage } from 'element-plus'
	import { echartUserWages,getStaffDetailData,
	getStaffDetailDataBytime,getStaffDetailDataByNameId,
	selectStaffDataByNameId,updataStaffWagesPost,addStaff,deleStaff} from "../../http/wages.js"
	const labelPosition = ref('top')
	// 图表数据---详细数据
	
	//分页
	const queryInforByWages = reactive(
		{
		query:"",
		// 当前页数
		pagenum:1,		
		//当前每页显示多少条数据
		pagesize:10,
		//总页数
		total:''
		}
	) 
	let wagesDetail = ref("")
	getStaffDetailData(queryInforByWages.pagenum).then(res=>{
		wagesDetail.value = res.data.records
		queryInforByWages.pagenum = res.data.current
		queryInforByWages.total = res.data.total
	})
	
	// 监听pagesize改变事件
	const handleSizeChangeByDetailWages = (val:number) => {
	}
	//监听页码值改变事件
	const handleCurrentChangeByDetailWages = (val:number) => {
	  getStaffDetailData(queryInforByWages.pagenum).then(res =>{
	  	wagesDetail.value = res.data.records
		queryInforByWages.pagesize = res.data.length
	  })
	}
	
	//按时间查询
	const selectDetailBytime = ref("")
	const subByTime = () =>{
		getStaffDetailDataBytime(selectDetailBytime.value).then(res=>{
			wagesDetail.value = res.data.records
			queryInforByWages.pagenum = res.data.current
			queryInforByWages.pagesize = res.data.length
			queryInforByWages.total = 1
		})
	}
	//按nameId、、、selectDetailByNameId查询
	const selectDetailByNameId = ref("")
	//数据更新负责人
	const options = ref("")
	//人事变动删除人员
	const deleStaffOptions = ref("")
	//1.先查出所有人员的姓名还有Id
	getStaffDetailDataByNameId().then(res=>{
		options.value = res.data
		deleStaffOptions.value = res.data
	})
	//change改变事件搜索
	const subByNameId = (staffId) =>{
		selectStaffDataByNameId(staffId).then(res=>{
			wagesDetail.value = res.data.records
			queryInforByWages.pagenum = res.data.current
			queryInforByWages.pagesize = res.data.length
			queryInforByWages.total = 1
		})
	}
	
	//数据更新
	const updataStaffWages = reactive({
		staffId:"",
		commission:"",
		note:"",
	})
	const subUpdata = () =>{
		if(!updataStaffWages.staffId || !updataStaffWages.commission || !updataStaffWages.note){
			ElMessage.error("请输入完整信息")
			return
		}
		updataStaffWagesPost(updataStaffWages).then(res=>{	
			ElMessage.success("提交成功")
		})
	}
	//人士变动添加
	const addStaffForm = reactive({
		staffId:"",
		name:""
	})
	const subAddStaff =()=>{
		addStaff(addStaffForm).then(res=>{
			if(res.data==false){
				ElMessage.error("已存在当前工号")
				return
			}
			ElMessage.success("提交成功")
		})
	}	
	//人事变动后删除
	const deleStaffId = ref("")
	const subDelStaff =()=>{
		deleStaff(deleStaffId.value).then(res=>{
			ElMessage.success("删除成功")
		})
	}
	
	onMounted(() =>{
		let wagesChart = echarts.init(document.getElementById("wagesChart"));
		// 绘制图表
		echartUserWages().then(res=>{
			wagesChart.setOption({
				title: {
				    text: '薪资总况'
				},
				tooltip: {
				    trigger: 'axis',
				    axisPointer: {
				    type: 'shadow'
				    }
				},
				color:'#79bbff',
				legend: {},
				grid: {
				    left:0,
				    right:'4%',
				    bottom: '3%',
				    containLabel: true
				},
				xAxis: {
				    type: 'value',
				    boundaryGap: [0, 0.01]
				},
				yAxis: {
				    type: 'category',
				    data: res.data.name
				},
				series: [
				    {
				    name: '薪资',
				    type: 'bar',
					barMaxWidth:'70',
				    label: {
					color:'#f5f7fa',			
				    show: true
				    },
				    data: res.data.wages
				    },
				]
			});
		})
		
		window.onresize = function () {//自适应大小
			wagesChart.resize();
		};
	
	})
	//销毁echart
	let isShowEcharts = ref(true)
	onUnmounted(() =>{
		isShowEcharts.value=false
	})
</script>

<style scoped="scoped">
	.el-col{
		height:570px;
	}
	.el-tab-pane{
		height: 100%;
	}
	.el-tabs{
		height: 35.625rem;
	}
	.wageNav{
		text-align: center;
		height: 2.625rem;
	}
	:deep(.el-tabs__content){
		height: 90%;
	}
	:deep(.el-table__body-wrapper::-webkit-scrollbar){
		width: 0.1875rem;
		height: 0.1875rem;
	}
	:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {  /*滚动条里面小方块*/
	    border-radius: 10px;
	    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	    background: #ebebeb;
	}
	:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {  /*滚动条里面轨道*/
	    /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
	    border-radius: 10px;
	    background: #fff;
	}
	:deep(.el-form-item__label){
		text-align: center;
	}
	:deep(.el-form-item__content){
		justify-content: center;
	}
	@media screen and (max-width:48rem) {
		.wageNav{
			text-align:right;
		}
	}
</style>
